<template>
    <div class="page has-navbar sixlists">
            <von-header>
                <button class="button button-icon ion-ios-arrow-back" slot="left" @click="$router.back('/home')"></button>
                <span slot="title">{{id}}</span>
            </von-header>
            <tabs  v-if="!show" :tab-items="tabs" :tab-index="tabIndex" :on-tab-click="onTabClick"></tabs>
            <div class="page-content sixlist" >
                <scroll
                        :on-infinite="onInfinite" v-if="tabIndex==5">
                    <div class="six-product" v-if="!show">
                        <six-first :products_info="message.product_list"></six-first>
                    </div>
                    <div v-if="" slot="infinite" class="text-center">没有更多数据</div>
                </scroll>
                <div v-if="tabIndex==0">
                        <p>111</p>
                </div>
                <div v-if="tabIndex==1">
                    <div class="tabIndex1_1" v-if="tabIndex1">
                        <div class="tabIndex1-one">
                            <span>请选择价格区间({{this.message.filter_condition.price_area.min}}--{{this.message.filter_condition.price_area.max}})</span>
                            <von-range
                                    v-model="volume"
                                    :min="min"
                                    :max="max"
                            ></von-range>
                            <div class="padding">
                                value: {{ volume }}
                            </div>
                        </div>
                        <div class="tabIndex1-two">
                            <span>请选择行程天数</span>
                            <ul>
                                <li v-for="(l,index) in this.message.filter_condition.duration_type" @click="dayChange($event,index)">{{l.day | day}}</li>
                            </ul>
                        </div>
                        <div class="foot">
                            <span @click="reset()">重置</span>
                            <span @click="qdtype()">确定</span>
                        </div>
                    </div>
                    <div class="tabIndex1-2" v-if="!tabIndex1">
                        <six-first :products_info="tl1message.product_list"></six-first>
                    </div>
                </div>
                <div v-if="tabIndex==2">
                    <recommend-product :tag="message.filter_condition.tag"></recommend-product>
                </div>
            </div>
            <loading v-if="show"></loading>
    </div>
</template>

<script>
    import Loading from '../components/loading'
    import SixFirst from '../components/sixfirst.vue'
    import RecommendProduct from '../components/recommendproduct.vue'
    export default{
        components:{Loading,SixFirst,RecommendProduct},
        data() {
            return {
                id:this.$route.params.name,
                show:false,
                tabs: [
                    "目的地",
                    "筛选",
                    "推荐产品"
                ],
                sixlists:[
                    {name:"多日游",match:"multiday-tour"},
                    {name:"一日游",match:"daytour"},
                    {name:"票务",match:"ticket"},
                    {name:"游轮游",match:"cruise"},
                    {name:"通讯",match:"communication"},
                    {name:"接送",match:"car"},
                    {name:"途风精品",match:"minority-tour"}
                ],
                name:'',
                tabIndex: 5,
                message:{"filter_condition":{"price_area":{"min":"","max":""}}},
                tl1message:{},
                count:1,
                volume: 0,
                min: 0,
                max: 10000,
                tabIndex1:true,
                num:0
            }
        },
        methods: {
            onInfinite(done) {
                    this.count++
                console.log(this.count)
                    this.getData(this.count)
                    done()
            },
            onTabClick(index) {
                console.log(index)
                this.tabIndex = index
            },
            getData(page){
                for(var l of this.sixlists){
                    if(l.name==this.id){
                        this.name=l.match
                    }
                }
                this.show=true
                this.axios.get('https://app.toursforfun.com/search/'+this.name+'/product_list/1.0?page='+page+'&page_size=10')
                    .then(data=>{
                        this.show=false
                        this.message=data.data.data
//                        this.message=this.message.concat(data.data.data)
                        console.log(this.message.product_list)
                        console.log(this.message.filter_condition.duration_type)
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            dayChange(ev,index){
                $(ev.target).css('color','#0090f2').siblings().css('color','#363636')
                console.log(index)
                this.num=index
            },
            reset(){
                this.volume=0
                this.min=0
                $('.tabIndex1-two li').css('color','#363636')
            },
            qdtype(){
                this.axios.get('https://app.toursforfun.com/search/multiday-tour/product_list/1.0?duration_type='
                +this.num+'&page=1&page_size=10&price_min='+this.volume)
                    .then(data=>{
                        this.tabIndex1=false
                        this.tl1message=data.data.data
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            }
        },
        created(){
            this.getData(this.count)
        },
        filters:{
            day:function(value){
                if(value.indexOf('-')!=-1){
                    return value+'天'
                }else{
                    return value+'天以上'
                }
            }
        }
    }
</script>
<style>
    .sixlists .button.button-icon.ion-ios-arrow-back{
        color: #363636;
    }
    .sixlists .bar{
         background-size: 100% 0px; 
    }
   .sixlists .bar.bar-header{
        box-shadow: none;
    }
    .sixlists .bar.bar-light .title{
        color: #363636;
        font-weight: 600;
    }
    .sixlists .tabs{
        height:44px;
    }
    .sixlists .tabs-striped.tabs-color-positive .tab-item{
        font-size: 16px;
        color: #363636;
    }
    .sixlists .tabs-striped.tabs-color-positive .tab-item.tab-item-active, .tabs-striped.tabs-color-positive .tab-item.active, .tabs-striped.tabs-color-positive .tab-item.activated{
        color: #0090f2;
        font-weight:600;
    }
    .sixlists .tabs-top.tabs-striped .tab-item.tab-item-active, .tabs-top.tabs-striped .tab-item.active, .tabs-top.tabs-striped .tab-item.activated {
        margin-top: 1px;
        border-width: 0!important;
        border-style: solid;
    }
    .page-content.sixlist{
        box-shadow: none;
    }
    .page-content.sixlist>div{
        margin-top: 44px;
    }
    .six-product{
        background-color: #fff;
        margin-top:84px;
    }
    .tabIndex1_1 .foot{
        width:100%;
        height:44px;
        line-height: 44px;
        overflow: hidden;
        position: fixed;
        bottom: 0;
    }
    .tabIndex1_1 .foot span{
        display: inline-block;
        width:50%;
        float: left;
        text-align: center;
    }
    .tabIndex1_1 .foot span:nth-of-type(1){
        border-top:1px solid #e3e4e5;
    }
    .tabIndex1_1 .foot span:nth-of-type(2){
        background: #0090f2;
        color: #fff;
    }
    .tabIndex1-one{
        padding:32px 24px 0 24px;
        margin-bottom:48px;
    }
    .tabIndex1-two{
        padding:0 24px;
    }
    .tabIndex1-one>span,.tabIndex1-two>span{
        display: inline-block;
        font-size:16px;
        margin-bottom:10px;
    }
    .tabIndex1-two ul{
        width:100%;
    }
    .tabIndex1-two ul li{
        width:33.3333%;
        float: left;
        line-height: 30px;
    }
</style>
